<template>
    <div class="login_container">
      <el-row>
        <el-col :span="12" :xs="0"></el-col>
        <el-col :span="12" :xs="24">
          <el-form class="login_form" :model="loginForm" :rules="rules" ref="loginForms">
            <h1>Hello</h1>
            <h2>请先登录</h2>
            <el-form-item prop="username">
              <el-input
                :prefix-icon="User"
                v-model="loginForm.username"
                ></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                type="password"
                :prefix-icon="Lock"
                v-model="loginForm.password"
                show-password
                ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button :loading="loading" class="login_btn" type="primary" size="default" @click="login">
                登录
              </el-button>
            </el-form-item>

            <div class="to-register">
              没有账号？<el-link type="primary" @click="$router.push('/register')">去注册</el-link>
            </div>
          </el-form>
        </el-col>
      </el-row>
    </div>
  </template>
  
  <script setup lang="ts">
    import { User, Lock } from '@element-plus/icons-vue'
    import { reactive,ref } from 'vue'
    import { useRouter } from 'vue-router'
    import { ElNotification } from 'element-plus'
    //引入用户相关的小仓库
    import useUserStore from '@/store/modules/user'
    //引入获取当前时间的函数
    import { getTime } from '@/utils/time'

    //获取el-form组件
    let loginForms = ref()
    //引入小仓库
    let useStore = useUserStore()
    //获取路由器
    let $router = useRouter()
    //定义变量控制按钮加载效果
    let loading = ref(false)
    //收集账号与密码数据
    let loginForm = reactive({ username: 'admin', password: '123456' })
    //登录按钮回调
    const login = async()=>{
      //保证全部表单相校验通过再发请求
      await loginForms.value.validate()
      //按钮加载效果
      loading.value = true
        try{
          //保证登录成功
          await useStore.userLogin(loginForm)
          //编成式导航跳转到展示数据页面
          $router.push('/home')
          //登录成功提示信息
          ElNotification({
            type: 'success',
            message: '欢迎你',
            title:`Hi,${getTime()}好`
          })
          //登录成功按钮加载效果消失
          loading.value = false
        }catch(error){
          //登录失败按钮加载效果消失
          loading.value = false
          //登录失败的提示信息
          ElNotification({
            type:'error',
            message:(error as Error).message
          })
        }
    }
    //自定义校验规则函数
    const validatorUserName=(rule:any,value,callback:any)=>{
      //rule:即为校验规则对象
      //value:即为表单元素文本内容
      //如果符合条件callback放行通过，不符合callback注入错误提示信息
      if(value.length>=5){
        callback()
      }else{
        callback(new Error('账号长度至少五位'))
      }
    }
    const validatorPassword=(rule:any,value,callback:any)=>{
      if(value.length>=6){
        callback()
      }else{
        callback(new Error('密码长度至少六位'))
      }
    }
    //定义表单检验需要配置对象
    const rules = {
      //规则对象属性：
      //trigger:触发校验表单的时机 change->文本发生变化触发校验，blur：失去焦点的时候触发校验规则
      username:[
        // {required:true,min: 5,max:10,message:'账号长度至少六位',trigger:"change"}
        {trigger:'change',validator:validatorUserName}
      ],
      password:[
        // {required:true,min: 6,max:15,message:'密码长度至少六位',trigger:"change"}
        {trigger:'change',validator:validatorPassword}
        ]
    }

 
  </script>
  
  <style lang="scss" scoped>
    .login_container {
      width: 100%;
      height: 100vh;
      background: url('@/assets/images/504.jpg') no-repeat;
      background-size: cover;
      .login_form {
        position: relative;
        width: 80%;
        top: 30vh;
        background: url('@/assets/images/OIP-C.jpg') no-repeat;
        background-size: cover;
        padding: 40px;
        h1 {
          color: black;
          font-size: 40px;
        }
        h2 {
          color: black;
          font-size: 20px;
          margin: 20px 0px;
        }
    .login_btn {
      width: 100%;
    }
    
    .to-register {
      text-align: center;
      margin-top: 20px;
      color: #666;
    }
  }
}
  </style>
